<template>
  <div>
    <div class="recommend-title">周末去哪儿</div>
    <ul>
      <li class="item border-bottom" v-for="item of list" :key="item.id">
        <div class="item-img-wrapper">
          <img class="item-img" :src="item.imgUrl"/>
          <div class="item-mask"></div>
        </div>
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.stars}}星 {{item.comments}}条评论</p>
        </div>
      </li>
    </ul>
  </div>
</template>
38.1  40.64
<script>
export default {
  name: 'HomeWeekend',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped>
  @import "~styles/mixins.styl"
  .recommend-title
    line-height : 0.8rem
    background : #eee
    text-indent : 0.2rem
  .item
    height : 5.5rem
    position :relative;
    padding :0.1rem
    .item-img-wrapper
      overflow :hidden
      border-radius :0.25rem
      .item-img
        width :100%
        height:5.3rem
      .item-mask
        position :absolute;
        top :0.1rem
        left :0.1rem
        width: 100%;
        height:5.3rem
        border-radius :0.25rem
        background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(0,0,0,0.6)),color-stop(100%,transparent));
        background: -webkit-linear-gradient(left,rgba(0,0,0,0.6) 0,transparent 100%);
        background: linear-gradient(to right,rgba(0,0,0,0.6) 0,transparent 100%);

    .item-info
      position :absolute;
      top: 0.7 rem
      left : 0.8 rem
      padding :0.1rem
      color :white
      text-shadow #cccccc
      .item-title
        line-height : 0.54rem
        font-size : 0.42rem
        ellipsis()
      .item-desc
        line-height:0.4rem
        color :white
        ellipsis()
</style>
